<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情 - 二手市场</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/product-detail.css">
</head>
<body>
<header class="header">
    <div class="container">
        <div class="logo">
            <img src="images/logo.png" alt="二手市场">
            <h1>二手市场</h1>
        </div>
        <nav class="nav">
            <a href="index.html">首页</a>
            <a href="products.html">商品列表</a>
            <a href="cart.html">购物车</a>
            <a href="orders.html">我的订单</a>
            <a href="login.html" id="auth-link">登录/注册</a>
        </nav>
    </div>
</header>

<main class="container">
    <div class="product-detail">
        <div class="product-gallery">
            <div class="main-image-container">
                <img id="main-image" src="images/default-product.jpg" alt="商品主图">
            </div>
            <div class="thumbnails" id="thumbnails">
                <!-- 缩略图将通过JS加载 -->
            </div>
        </div>

        <div class="product-info">
            <h1 id="product-name">商品名称</h1>
            <div class="meta-row">
                <span class="product-id">商品ID: <span id="product-id">-</span></span>
                <span class="product-views">浏览量: <span id="view-count">0</span></span>
            </div>

            <div class="price-section">
                <div class="current-price">
                    <span>现价:</span>
                    <span id="price">¥0.00</span>
                </div>
                <div class="original-price" id="original-price-container">
                    <span>原价:</span>
                    <span id="original-price">¥0.00</span>
                </div>
            </div>

            <div class="status-section">
                <span>状态:</span>
                <span id="product-status" class="status-badge">未知</span>
            </div>

            <div class="stock-section">
                <span>库存:</span>
                <span id="stock">0</span>件
            </div>

            <div class="seller-section">
                <span>卖家:</span>
                <a href="#" id="seller-name">未知卖家</a>
                <span class="rating" id="seller-rating">★★★★★</span>
            </div>

            <div class="quantity-control">
                <button id="decrease-qty">-</button>
                <input type="number" id="quantity" value="1" min="1">
                <button id="increase-qty">+</button>
            </div>

            <div class="actions">
                <button class="btn btn-primary" id="add-to-cart-btn">加入购物车</button>
                <button class="btn btn-buy" id="buy-now-btn">立即购买</button>
            </div>
        </div>
    </div>

    <div class="product-tabs">
        <div class="tab-headers">
            <button class="tab-header active" data-tab="description">商品描述</button>
            <button class="tab-header" data-tab="reviews">商品评价</button>
            <button class="tab-header" data-tab="details">商品详情</button>
        </div>

        <div class="tab-contents">
            <div id="description" class="tab-content active">
                <div id="product-description">加载中...</div>
            </div>

            <div id="reviews" class="tab-content">
                <div class="reviews-list" id="reviews-list">
                    <!-- 评价将通过JS加载 -->
                </div>
            </div>

            <div id="details" class="tab-content">
                <div id="product-details">加载中...</div>
            </div>
        </div>
    </div>
</main>

<footer class="footer">
    <div class="container">
        <p>&copy; 2025 二手市场. 保留所有权利.</p>
    </div>
</footer>

<script src="js/api.js"></script>
<script src="js/utils.js"></script>
<script src="js/product-detail.js"></script>
</body>
</html>